<template>
  <div>
    <div class="admin-renyuan">
      <div class="admin-renyuan-case">
        <div ref="contraTop" class="admin-top">
          <div class="admin-case-top">
            <div style="font-size: 14px; color: #333333">所属部门</div>
            <el-select
              style="width: 200px; margin-left: 8px"
              v-model="form.bmbm"
              placeholder="请选择所属部门"
            >
              <el-option
                v-for="(item, i) in bmbmArr"
                :key="i"
                :label="item.mc"
                :value="item.bh"
              ></el-option>
            </el-select>
          </div>
          <div class="admin-case-top">
            <div style="font-size: 14px; color: #333333">人员类别</div>
            <el-select
              style="width: 200px; margin-left: 8px"
              v-model="form.rylb"
              placeholder="请选择人员类别"
            >
              <el-option
                :label="item.label"
                v-for="(item, i) in columns[12].selectOption.data"
                :key="i"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="admin-case-top">
            <div style="font-size: 14px; color: #333333">人员编码</div>
            <el-input
              style="width: 200px; margin-left: 8px"
              v-model="form.rybm"
              placeholder="请选择人员编码"
            ></el-input>
          </div>
          <div class="admin-case-top">
            <div style="font-size: 14px; color: #333333">姓名</div>
            <el-input
              style="width: 200px; margin-left: 8px"
              v-model="form.ryxm"
              placeholder="请选择人员姓名"
            ></el-input>
          </div>
          <el-button
            type="primary"
            :icon="Search"
            @click="searchClick"
            style="width: 72px"
            >查询</el-button
          >
        </div>
        <div class="line"></div>
        <div class="xinban-pai">
          <div
            class="xinban-pai-left"
            :class="{ 'xinban-pai-left-active': detailShow }"
          >
            <div class="button-case">
              <div @click="addData" class="button-case-box">
                <img
                  src="../../../assets/images/add_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>新增</div>
              </div>
              <div @click="deleteClick" class="button-case-box">
                <img
                  src="../../../assets/images/del_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>删除</div>
              </div>
              <div @click="saveClick" class="button-case-box">
                <img
                  src="../../../assets/images/save_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>保存</div>
              </div>
              <div class="button-case-box">
                <img
                  src="../../../assets/images/can_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>取消</div>
              </div>
              <div class="button-case-box" @click="detailClick">
                <img
                  src="../../../assets/images/bangding_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>详情</div>
              </div>
              <div class="button-case-box">
                <img
                  src="../../../assets/images/print_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>打印</div>
              </div>
              <div class="button-case-box">
                <img
                  src="../../../assets/images/der_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>导出</div>
              </div>
              <div class="button-case-box">
                <img
                  src="../../../assets/images/adduser_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>添加操作员</div>
              </div>
              <div class="button-case-box">
                <img
                  src="../../../assets/images/edituser_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>修改操作员</div>
              </div>
              <div class="button-case-box">
                <img
                  src="../../../assets/images/unlock_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>解锁</div>
              </div>
              <div class="button-case-box">
                <img
                  src="../../../assets/images/tupian_icon.png"
                  style="width: 16px; height: 16px; margin-right: 2px"
                  alt=""
                  srcset=""
                />
                <div>选择图片</div>
              </div>
            </div>
            <!-- 表格 -->
            <xinpuTableGrid
              ref="xinpuGrid"
              :loading="loading"
              :tableHeight="tableHeight"
              :tableWidth="tableWidth"
              :columnsData="columns"
              :data="data"
              :border="true"
              @updataSelect="updataSelect"
              @selectCheckedChange="selectCheckedChange"
              @vxeActiveClick="vxeActiveClick"
            >
            </xinpuTableGrid>
          </div>
          <div class="resize">
            <img
              src="../../../assets/images/huadong_icon.png"
              style="width: 100%; height: 12px"
              alt=""
              srcset=""
            />
          </div>
          <div class="xinban-pai-right" v-if="detailShow">
            <div class="admin-Drawer-top">
              <div>{{addform.ryxm}}</div>
              <el-icon size="18px" @click="detailShowCloseClick"
                ><Close
              /></el-icon>
            </div>
            <div class="admin-Drawer-bottoms">
              <div class="admin-Drawer-bottoms-tab">
                <div
                  class="admin-Drawer-bottoms-tab-case"
                  :class="{ 'tabs-active': tsbsActive == i }"
                  v-for="(item, i) in tabsArr"
                  @click="tabsClick(i)"
                  :key="i"
                >
                  {{ item }}
                </div>
              </div>
              <div class="admin-Drawer-bottoms-btn">
                <div @click="detailSaveClick" class="button-case-box">
                  <img
                    src="../../../assets/images/save_icon.png"
                    style="width: 16px; height: 16px; margin-right: 2px"
                    alt=""
                    srcset=""
                  />
                  <div>保存</div>
                </div>
                <div @click="detailShowCloseClick" class="button-case-box">
                  <img
                    src="../../../assets/images/can_icon.png"
                    style="width: 16px; height: 16px; margin-right: 2px"
                    alt=""
                    srcset=""
                  />
                  <div>取消</div>
                </div>
              </div>
              <div class="content-tabs container" ref="container">
                <div
                  class="content-info"
                  v-show="tsbsActive == 1 || tsbsActive == 0"
                  id="infos"
                  ref="infos"
                >
                  <div class="content-info-top">
                    <div class="content-line"></div>
                    <div>基本信息</div>
                  </div>
                  <div class="content-info-center-cell">
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">人员编码</div>
                      <el-input
                        v-model="addform.rybm"
                        style="width: 200px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">人员姓名</div>
                      <el-input
                        v-model="addform.ryxm"
                        style="width: 200px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                      >
                        人员性别
                      </div>
                      <el-radio v-model="addform.xb" label="0"
                        >女</el-radio
                      >
                      <el-radio v-model="addform.xb" label="1"
                        >男</el-radio
                      >
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">出生日期</div>
                      <el-date-picker
                        style="width: 200px"
                        v-model="addform.yb_csrq"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期时间"
                      >
                      </el-date-picker>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">人员年龄</div>
                      <el-input
                        type="number"
                        v-model="addform.ll"
                        style="width: 200px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                      >
                        所属部门
                      </div>
                      <el-select
                        style="width: 200px"
                        v-model="addform.bmbm"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, i) in columns[11].selectOption.data"
                          :key="i"
                          :label="item.mc"
                          :value="item.bh"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">人员简码</div>
                      <el-input
                        v-model="addform.jm"
                        style="width: 200px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">状态</div>
                      <div class="content-state">
                        <div
                          class="content-state-one"
                          :class="{
                            'content-state-active': addform.syzt == 1,
                          }"
                          @click="stateClick(1)"
                        >
                          正常
                        </div>
                        <div
                          class="content-state-two"
                          :class="{
                            'content-state-active': addform.syzt == 2,
                          }"
                          @click="stateClick(2)"
                        >
                          停用
                        </div>
                        <div
                          class="content-state-three"
                          :class="{
                            'content-state-active': addform.syzt == 3,
                          }"
                          @click="stateClick(3)"
                        >
                          申请中
                        </div>
                      </div>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                      >
                        病历质控
                      </div>
                      <el-select
                        style="width: 200px"
                        v-model="addform.blzk"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, i) in columns[17].selectOption.data"
                          :key="i"
                          :label="item.mc"
                          :value="item.dm"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                        style="flex: 0 0 130px"
                      >
                        电子病历访问科室
                      </div>
                      <selectCheckedTable
                        style="width:134px;"
                        v-model:data="addform.bmbmbm"
                        :fields="hylxArrFields"
                        :tableData="columns[13].selectOption.data"
                        objKey="itemid"
                        label="itemid"
                        :border="true"
                        :alreadyOption="hylxYxArr"
                        alreadyOptionKey="bh"
                        alreadyOptionLabel="mc"
                        clearable
                        @update="selectCheckedChanges"
                    ></selectCheckedTable>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                      >
                        访问科室
                      </div>
                      <el-select
                        style="width: 200px"
                        v-model="addform.bmbm_1"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, i) in columns[15].selectOption.data"
                          :key="i"
                          :label="item.mc"
                          :value="item.bh"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                      >
                        病区分类
                      </div>
                      <el-select
                        style="width: 200px"
                        v-model="addform.bqfl"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, i) in columns[16].selectOption.data"
                          :key="i"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                      >
                        人员类别
                      </div>
                      <el-select
                        style="width: 200px"
                        v-model="addform.rylb"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, i) in columns[12].selectOption.data"
                          :key="i"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                      >
                        挂号类别
                      </div>
                      <el-select
                        style="width: 200px"
                        v-model="addform.ghlb"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, i) in columns[14].selectOption.data"
                          :key="i"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">民族</div>
                      <el-input
                        v-model="addform.yb_mz"
                        style="width: 200px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">身份证号</div>
                      <el-input
                        type="number"
                        v-model="addform.aac002"
                        style="width: 200px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case" style="width:540px;margin-right:12px;align-items: flex-start;">
                      <div class="content-info-center-case-lable" style="flex: 0 0 64px">人员简介</div>
                      <el-input
                        type="textarea"
                        :rows="4"
                        style="flex:1; !important"
                        placeholder="请输入"
                        v-model="addform.ryjj">
                      </el-input>
                    </div>
                    <div class="content-info-center-case" style="align-items: flex-start;">
                      <div class="content-info-center-case-lable">人员照片</div>
                      <el-upload
                        class="avatar-uploader"
                        action=""
                        :show-file-list="false"
                        :http-request="uploadFile"
                      >
                        <img v-if="addform.img" :src="addform.img?'data:image/png;base64,' + addform.img:''" class="avatar" />
                        <div v-else>
                          <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
                          <div class="avatar-uploader-text">点击上传图片</div>
                        </div>
                      </el-upload>
                    </div>
                  </div>
                </div>
                <div
                  class="content-info"
                  v-show="tsbsActive == 2 || tsbsActive == 0"
                  id="infos"
                  ref="infos"
                >
                  <div class="content-info-top">
                    <div class="content-line"></div>
                    <div>医保相关信息</div>
                  </div>
                  <div class="content-info-center-cell">
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                      >
                        执业范围
                      </div>
                      <el-select
                        style="width: 200px"
                        v-model="addform.yke420"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, i) in columns[23].selectOption.data"
                          :key="i"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                      >
                        职务
                      </div>
                      <el-select
                        style="width: 200px"
                        v-model="addform.yke425"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, i) in columns[28].selectOption.data"
                          :key="i"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                        style="flex: 0 0 92px"
                      >
                        医执人员类别
                      </div>
                      <el-select
                        style="width: 172px"
                        v-model="addform.yke418"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, i) in columns[22].selectOption.data"
                          :key="i"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                        style="flex: 0 0 104px"
                      >
                        科室(病区)编号
                      </div>
                      <el-select
                        style="width: 160px"
                        v-model="addform.yke414"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, i) in columns[29].selectOption.data"
                          :key="i"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">联系电话</div>
                      <el-input
                        v-model="addform.aae005"
                        style="width: 200px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                      >
                        职称
                      </div>
                      <el-select
                        style="width: 200px"
                        v-model="addform.yke424"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, i) in columns[27].selectOption.data"
                          :key="i"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        style="flex: 0 0 108px"
                        class="content-info-center-case-lable"
                      >
                        是否拥有处方权
                      </div>
                      <el-radio v-model="addform.yke423" label="0"
                        >否</el-radio
                      >
                      <el-radio v-model="addform.yke423" label="1"
                        >是</el-radio
                      >
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">执业地点</div>
                      <el-input
                        v-model="addform.yke432"
                        style="width: 200px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable" style="flex:0 0 78px">执业注册地</div>
                      <el-input
                        v-model="addform.yb_zcdz"
                        style="width: 190px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable" style="flex:0 0 92px">执业证书编码</div>
                      <el-input
                        v-model="addform.yke421"
                        style="width: 172px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable" style="flex:0 0 92px">执业起始时间</div>
                      <el-date-picker
                        style="width: 172px"
                        v-model="addform.yke431"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期时间"
                      >
                      </el-date-picker>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable" style="flex:0 0 92px">执业结束时间</div>
                      <el-date-picker
                        style="width: 172px"
                        v-model="addform.yb_zcjsrq"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期时间"
                      >
                      </el-date-picker>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable" style="flex:0 0 92px">有效证件类型</div>
                      <el-input
                        v-model="addform.ry_zjlx"
                        style="width: 172px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable" style="flex:0 0 92px">有效证件号码</div>
                      <el-input
                        v-model="addform.ry_zjhm"
                        style="width: 172px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable" style="flex:0 0 120px">定岗资格证书编码</div>
                      <el-input
                        v-model="addform.yke422"
                        style="width: 144px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                  </div>
                </div>

                <div
                  class="content-info"
                  v-show="tsbsActive == 3 || tsbsActive == 0"
                  id="infos"
                  ref="infos"
                >
                  <div class="content-info-top">
                    <div class="content-line"></div>
                    <div>其他信息</div>
                  </div>
                  <div class="content-info-center-cell">
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">报表序号</div>
                      <el-input
                        v-model="addform.bbxh"
                        style="width: 200px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                      >
                        客服分组
                      </div>
                      <el-select
                        style="width: 200px"
                        v-model="addform.kffz"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, i) in columns[35].selectOption.data"
                          :key="i"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable" style="flex:0 0 92px">诊室序号限制</div>
                      <el-input
                        v-model="addform.zsxhxz"
                        style="width: 172px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">就诊序号</div>
                      <el-input
                        v-model="addform.zrxh"
                        style="width: 200px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">已诊序号</div>
                      <el-input
                        v-model="addform.zsxhyz"
                        style="width: 200px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">实习医生</div>
                      <el-input
                        v-model="addform.xm_sxys"
                        style="width: 200px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                        style="flex: 0 0 92px"
                      >
                        是否允许归档
                      </div>
                      <el-radio v-model="addform.sfyxgd" label="0"
                        >否</el-radio
                      >
                      <el-radio v-model="addform.sfyxgd" label="1"
                        >是</el-radio
                      >
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                        style="flex:0 0 120px;"
                      >
                        门诊收费权限分组
                      </div>
                      <el-select
                        style="width: 144px"
                        v-model="addform.medid"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="(item, i) in columns[34].selectOption.data"
                          :key="i"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable" style="flex: 0 0 80px">操作员标志</div>
                      <el-input
                        v-model="addform.czybz"
                        style="width: 186px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div class="content-info-center-case-lable">登录名</div>
                      <el-input
                        v-model="addform.dlm"
                        style="width: 200px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                        style="flex:0 0 92px"
                      >
                        国家医保编码
                      </div>
                      <el-input
                        v-model="addform.gbbm"
                        style="width: 172px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                    <div class="content-info-center-case">
                      <div
                        class="content-info-center-case-lable"
                      >
                        qq
                      </div>
                      <el-input
                        v-model="addform.qq"
                        style="width: 200px"
                        placeholder="请输入"
                      ></el-input>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="ren-dialog">
        <el-dialog v-model="dialogVisible" :show-close="false" width="600px">
          <div class="ren-dialog-case">
            <div class="dialog-top">
              <div class="dialog-top-case">
                <img
                  src="../../../assets/images/edit_icon.png"
                  style="width: 16px; height: 16px; margin-right: 8px"
                  alt=""
                  srcset=""
                />
                <div>修改操作员</div>
              </div>
              <img
                @click="closeClick"
                src="../../../assets/images/Close_icon.png"
                style="width: 16px; height: 16px; cursor: pointer"
                alt=""
                srcset=""
              />
            </div>
            <div class="dialog-content">
              <div class="dialog-content-case">
                <div style="margin-bottom: 12px">人员编码</div>
                <el-input
                  style="width: 100%"
                  disabled
                  v-model="editform.region"
                  placeholder="请输入人员编码"
                ></el-input>
              </div>
              <div class="dialog-content-case">
                <div style="margin-bottom: 12px">人员姓名</div>
                <el-input
                  style="width: 100%"
                  disabled
                  v-model="editform.region"
                  placeholder="请输入人员姓名"
                ></el-input>
              </div>
              <div class="dialog-content-case">
                <div style="margin-bottom: 12px">登录名</div>
                <el-input
                  style="width: 100%"
                  v-model="editform.region"
                  placeholder="请输入登录名"
                ></el-input>
              </div>
              <div class="dialog-content-case">
                <div style="margin-bottom: 12px">密码</div>
                <el-input
                  style="width: 100%"
                  v-model="editform.region"
                  placeholder="请输入密码"
                ></el-input>
              </div>
              <div class="dialog-content-case">
                <div style="margin-bottom: 12px">确认密码</div>
                <el-input
                  style="width: 100%"
                  v-model="editform.region"
                  placeholder="请确认密码"
                ></el-input>
              </div>
              <div class="dialog-content-case">
                <div style="margin-bottom: 12px">权限分组</div>
                <el-radio-group v-model="editform.region">
                  <el-radio :label="3">备选项</el-radio>
                  <el-radio :label="6">备选项</el-radio>
                  <el-radio :label="9">备选项</el-radio>
                  <el-radio :label="9">备选项</el-radio>
                  <el-radio :label="9">备选项</el-radio>
                  <el-radio :label="9">备选项</el-radio>
                  <el-radio :label="9">备选项</el-radio>
                  <el-radio :label="9">备选项</el-radio>
                  <el-radio :label="9">备选项</el-radio>
                  <el-radio :label="9">备选项</el-radio>
                </el-radio-group>
              </div>
              <div class="dialog-content-case">
                <div style="margin-bottom: 12px">人员角色</div>
                <el-select
                  v-model="editform.region"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in roleOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="dialog-footer">
              <el-button type="primary">重置密码</el-button>
              <el-button>保存</el-button>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup name="PersonnelForm">
import selectCheckedTable from "@/components/selectCheckedTable/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import xinpuTableGrid from "@/components/xinpuTableGrid/index.vue";
import { ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
const container = ref(null);
const stateActive = ref(0);
const hylxArrFields = ref([
    {
        prop: "bh",
        label: "代码",
        width: 100,
    },
    {
        prop: "mc",
        label: "名称",
        width: 200,
    }
])
const hylxYxArr = ref([]);
const alls = ref(null);
const infos = ref(null);
const yibaoinfos = ref(null);
const others = ref(null);
const tabsArr = ["全部", "基本信息", "医保相关信息",'其它信息'];
const tsbsActive = ref(0)
const form = ref({
  bmbm:'',
  rylb:'',
  rybm:'',
  ryxm:''
})
const addform = ref({
  AccountId: 0,
  LastLoginTime: null,
  aac002: "",
  aae005: "",
  bbxh: "",
  blzk: "",
  bmbm: "",
  bmbm_1: "",
  bmbm_2: null,
  bmbmbm: "",
  bqfl: "",
  cardArr: [],
  czybz: "",
  dlm: "",
  dlm_xp: null,
  gbbm: "",
  ghlb: "",
  img: null,
  jm: "",
  kffz: "",
  ll: 25,
  medid: "",
  mz_xjm: null,
  pwd_xp: null,
  qq: "",
  qxgroup: null,
  ry_zjhm: "",
  ry_zjlx: "",
  rybm: "",
  ryjj: null,
  rylb: "",
  ryxm: "",
  saveflag: null,
  sf_pxtg: null,
  sfyxgd: "",
  sfzg: null,
  sfzh: "",
  sxjssj: "",
  sxkssj: "",
  syzt: "",
  wd_byxx: null,
  wd_cjgzsj: null,
  wd_csrq: null,
  wd_czhm: null,
  wd_dqzwjb: null,
  wd_dzc: null,
  wd_dzmph: null,
  wd_dzxz: null,
  wd_gj: null,
  wd_grdzyj: null,
  wd_gwlb: null,
  wd_hyzk: null,
  wd_mz: null,
  wd_phone: null,
  wd_qq: null,
  wd_rdsj: null,
  wd_ryxz: null,
  wd_s: null,
  wd_sq: null,
  wd_x: null,
  wd_xllxdm: null,
  wd_xw: null,
  wd_xzzjtdz: null,
  wd_xzzw: null,
  wd_xzzxzqh: null,
  wd_zgxl: null,
  wd_zyjszw: null,
  wd_zzmm: null,
  wx_sfxs: null,
  xb: "",
  xl: null,
  xm_sxys: "",
  xpsm_zth: "",
  xpsm_zth_cx: null,
  yb_csrq: "",
  yb_mz: "",
  yb_zcdz: "",
  yb_zcjsrq: "",
  yke414: "",
  yke418: "",
  yke420: "",
  yke421: "",
  yke422: "",
  yke423: "",
  yke424: "",
  yke425: "",
  yke431: "",
  yke432: "",
  ys_dmqx: "",
  zlyw: null,
  zrxh: "",
  zsbm: "",
  zsxh: "",
  zsxhxz: null,
  zsxhyz: null,
  zw: "",
  zy_xjm: null,
});
const activeName = ref("all");
const editform = ref({
  region: "",
  radio: "",
  regions: [],
  imageUrl: "",
});
const roleOptions = ref([
  {
    value: "选项1",
    label: "黄金糕",
  },
  {
    value: "选项2",
    label: "双皮奶",
  },
  {
    value: "选项3",
    label: "蚵仔煎",
  },
  {
    value: "选项4",
    label: "龙须面",
  },
  {
    value: "选项5",
    label: "北京烤鸭",
  },
]);
const dialogVisible = ref(false);
const pageNo = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
});
const loading = ref(false);
const xinpuGrid = ref(null);
const tableHeight = ref(0);
const tableWidth = ref(0);
const bmbmArr = ref([]);
const contraTop = ref(null);
const options = ref([[{ code: "myBtn", name: "列调整" }]]);
const columns = ref([
  { type: "checkbox", width: 48 },
  {
    field: "rybm",
    title: "人员编码",
    width: 80,
    editRender: { name: "input" },
  },
  {
    field: "ryxm",
    width: 80,
    title: "姓名",
    editRender: { name: "input" },
  },
  {
    field: "dlm",
    title: "登录名",
    width: 80,
    editRender: { name: "input" },
  },
  {
    field: "syzt",
    title: "状态",
    width: 100,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "dm",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        },
      ],
      data: [
        {
          dm: 1,
          mc: "正常",
        },
        {
          dm: 2,
          mc: "停用",
        },
        {
          dm: 3,
          mc: "申请中",
        },
      ],
      objKey: "dm",
      label: "mc",
    },
  },
  {
    field: "jm",
    title: "简码",
    width: 60,
    editRender: { name: "input" },
  },
  {
    field: "xb",
    title: "性别",
    width: 60,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "dm",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        },
      ],
      data: [
        {
          dm: "0",
          mc: "女",
        },
        {
          dm: "1",
          mc: "男",
        },
      ],
      objKey: "dm",
      label: "mc",
    },
  },
  {
    field: "ll",
    title: "年龄",
    width: 60,
    editRender: { name: "input" },
  },
  {
    field: "yb_csrq",
    title: "出生日期",
    width: 120,
    editRender: {},
    selectName: "dataSelect",
  },
  {
    field: "aae005",
    title: "联系电话",
    width: 120,
    type: "number",
    editRender: { name: "input" },
  },
  {
    field: "aac002",
    title: "公民身份证号码",
    width: 160,
    editRender: { name: "input" },
  },
  // 11
  {
    field: "bmbm",
    title: "部门",
    width: 140,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "bh",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        },
      ],
      data: [],
      objKey: "bh",
      label: "mc",
    },
  },
  {
    field: "rylb",
    title: "人员类别",
    width: 100,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        },
      ],
      data: [],
      objKey: "value",
      label: "label",
    },
  },
  {
    field: "bmbmbm",
    title: "电子病历访问科室",
    width: 160,
    editRender: {},
    selectName: "selectCheckedTable",
    selectOption: {
      fields: [
        {
          prop: "bh",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        },
      ],
      data: [],
      objKey: "bh",
      label: "mc",
      feedbackKey: "bh", //回显字段
    },
  },
  {
    field: "ghlb",
    title: "挂号类别",
    width: 120,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        },
      ],
      data: [],
      objKey: "value",
      label: "label",
    },
  },
  {
    field: "bmbm_1",
    title: "访问科室",
    width: 120,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "bh",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        },
      ],
      data: [],
      objKey: "bh",
      label: "mc",
    },
  },

  {
    field: "bqfl",
    title: "病区分类",
    width: 120,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        },
      ],
      data: [],
      objKey: "value",
      label: "label",
    },
  },

  {
    field: "blzk",
    title: "病历质控",
    width: 120,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "dm",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        },
      ],
      data: [
        {
          dm: 1,
          mc: "院级质控",
        },
        {
          dm: 2,
          mc: "科室质控员",
        },
        {
          dm: 3,
          mc: "护士长",
        },
        {
          dm: 4,
          mc: "质控查询",
        },
      ],
      objKey: "dm",
      label: "mc",
    },
  },
  {
    field: "gbbm",
    title: "国家医保编码",
    width: 140,
    editRender: { name: "input" },
  },
  {
    field: "czybz",
    title: "操作员标志",
    width: 100,
  },
  {
    field: "zsxhxz",
    title: "诊室序号限制",
    width: 120,
    editRender: { name: "input" },
  },
  // 21
  {
    field: "bbxh",
    title: "报表显示顺序",
    width: 120,
    editRender: { name: "input" },
  },
  {
    field: "yke418",
    title: "医执人员类别",
    width: 120,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        },
      ],
      data: [],
      objKey: "value",
      label: "label",
    },
  },
  {
    field: "yke420",
    title: "医执人员执业范围",
    width: 140,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        },
      ],
      data: [],
      objKey: "value",
      label: "label",
    },
  },
  {
    field: "yke421",
    title: "执业证书编码",
    width: 140,
    editRender: { name: "input" },
  },
  {
    field: "yke422",
    title: "定岗资格证书编码",
    width: 140,
    editRender: { name: "input" },
  },
  {
    field: "yke423",
    title: "处方权",
    width: 80,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "dm",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        },
      ],
      data: [
        {
          dm: "0",
          mc: "否",
        },
        {
          dm: "1",
          mc: "是",
        },
      ],
      objKey: "dm",
      label: "mc",
    },
  },
  {
    field: "yke424",
    title: "职称",
    width: 120,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        },
      ],
      data: [],
      objKey: "value",
      label: "label",
    },
  },
  {
    field: "yke425",
    title: "职务",
    width: 80,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        },
      ],
      data: [],
      objKey: "value",
      label: "label",
    },
  },
  {
    field: "yke414",
    title: "科室(病区)编号",
    width: 140,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        },
      ],
      data: [],
      objKey: "value",
      label: "label",
    },
  },
  {
    field: "yke431",
    title: "执业起始时间",
    width: 140,
    editRender: {},
    selectName: "dataSelect",
  },
  // 31
  {
    field: "yke432",
    title: "执业地点",
    width: 120,
    editRender: { name: "input" },
  },
  {
    field: "zrxh",
    title: "就诊序号",
    width: 120,
    editRender: { name: "input" },
  },
  {
    field: "zsxhyz",
    title: "已诊序号",
    width: 120,
    editRender: { name: "input" },
  },
  {
    field: "medid",
    title: "门诊收费权限分组",
    width: 160,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        },
      ],
      data: [],
      objKey: "value",
      label: "label",
    },
  },
  {
    field: "kffz",
    title: "客服分组",
    width: 120,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        },
      ],
      data: [],
      objKey: "value",
      label: "label",
    },
  },
  {
    field: "xm_sxys",
    title: "实习医生",
    width: 120,
    editRender: { name: "input" },
  },
  {
    field: "ys_dmqx",
    title: "是否可开具毒麻药品",
    width: 160,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "dm",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        },
      ],
      data: [
        {
          dm: "0",
          mc: "否",
        },
        {
          dm: "1",
          mc: "是",
        },
      ],
      objKey: "dm",
      label: "mc",
    },
  },
  {
    field: "sfyxgd",
    title: "是否允许归档",
    width: 120,
    editRender: {},
    selectName: "selectTable",
    selectOption: {
      fields: [
        {
          prop: "dm",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        },
      ],
      data: [
        {
          dm: "0",
          mc: "否",
        },
        {
          dm: "1",
          mc: "是",
        },
      ],
      objKey: "dm",
      label: "mc",
    },
  },
  {
    field: "yb_mz",
    title: "民族",
    width: 80,
    editRender: { name: "input" },
  },
  {
    field: "yb_zcdz",
    title: "执业注册地",
    width: 120,
    editRender: { name: "input" },
  },
  {
    field: "yb_zcjsrq",
    title: "结束执业时间",
    width: 120,
    editRender: {},
    selectName: "dataSelect",
  },
  {
    field: "ry_zjlx",
    title: "有效证件类型",
    width: 120,
    editRender: { name: "input" },
  },
  {
    field: "ry_zjhm",
    title: "有效证件号码",
    width: 120,
    editRender: { name: "input" },
  },
  {
    field: "sxkssj",
    title: "生效开始时间",
    width: 120,
    editRender: {},
    selectName: "dataSelect",
  },
  {
    field: "sxjssj",
    title: "生效结束时间",
    width: 120,
    editRender: {},
    selectName: "dataSelect",
  },
  {
    field: "qq",
    title: "qq",
    width: 100,
    editRender: { name: "input" },
  },
  {
    field: "vxeActive",
    title: "操作",
    fixed: "right",
    width: 90,
    selectOption: ["详情", "删除"],
  },
]);
const data = ref([]);
const detailShow = ref(false);
const uploadFile = async(request)=>{
  console.log(request,'执行到这里了吗？');
  getBase64(request.file).then(res => {
      console.log(res)
      addform.value.img = res
  });
}
const getBase64 = (file) =>{
    return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
            imgResult = reader.result.replace(/data.+?;base64,/,'');
        };
        reader.onerror = function (error) {
            reject(error);
        };
        reader.onloadend = function () {
            resolve(imgResult);
        };
    });
}
const detailShowCloseClick = ()=>{
  detailShow.value = false;
  let left = document.getElementsByClassName("xinban-pai-left");
  left[0].style = "";
}
const vxeActiveClick = (name, row) => {
  if (name == "详情") {
    hylxYxArr.value = []
    let bmbmbm = row.bmbmbm.split(',')
    bmbmbm.forEach(v=>{
      columns.value[13].selectOption.data.forEach(its=>{
        if(v == its.bh){
          hylxYxArr.value.push(its)
        }
      })
    })
    addform.value = row;
    detailShow.value = true;
    dragControllerDiv();
  } else if (name == "删除") {
    ElMessageBox.confirm("此操作将永久删除该数据, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(async () => {
        if (row.saveflag == 1) {
          data.value.forEach((v, j) => {
            if (row._X_ROW_KEY == v._X_ROW_KEY) {
              data.value.splice(j, 1);
            }
          });
          ElMessage({
            message: "删除成功",
            type: "success",
          });
        } else {
          row.saveflag = 3;
          const res = await window.xinpuHttpApi("100361", { list: [row] });
          if (res && res.Flag) {
            ElMessage({
              message: "删除成功",
              type: "success",
            });
            getData();
          }
        }
      })
      .catch(() => {});
  }
};
const tabsClick = (i) => {
  tsbsActive.value = i;
};
// 新增数据
const addData = () => {
  data.value.push({
    AccountId: 0,
    LastLoginTime: null,
    aac002: "",
    aae005: "",
    bbxh: "",
    blzk: "",
    bmbm: "",
    bmbm_1: "",
    bmbm_2: null,
    bmbmbm: "",
    bqfl: "",
    cardArr: [],
    czybz: "",
    dlm: "",
    dlm_xp: null,
    gbbm: "",
    ghlb: "",
    img: null,
    jm: "",
    kffz: "",
    ll: 25,
    medid: "",
    mz_xjm: null,
    pwd_xp: null,
    qq: "",
    qxgroup: null,
    ry_zjhm: "",
    ry_zjlx: "",
    rybm: "",
    ryjj: null,
    rylb: "",
    ryxm: "",
    saveflag: 1,
    sf_pxtg: null,
    sfyxgd: "",
    sfzg: null,
    sfzh: "",
    sxjssj: "",
    sxkssj: "",
    syzt: "1",
    wd_byxx: null,
    wd_cjgzsj: null,
    wd_csrq: null,
    wd_czhm: null,
    wd_dqzwjb: null,
    wd_dzc: null,
    wd_dzmph: null,
    wd_dzxz: null,
    wd_gj: null,
    wd_grdzyj: null,
    wd_gwlb: null,
    wd_hyzk: null,
    wd_mz: null,
    wd_phone: null,
    wd_qq: null,
    wd_rdsj: null,
    wd_ryxz: null,
    wd_s: null,
    wd_sq: null,
    wd_x: null,
    wd_xllxdm: null,
    wd_xw: null,
    wd_xzzjtdz: null,
    wd_xzzw: null,
    wd_xzzxzqh: null,
    wd_zgxl: null,
    wd_zyjszw: null,
    wd_zzmm: null,
    wx_sfxs: 0,
    xb: "1",
    xl: null,
    xm_sxys: "",
    xpsm_zth: "",
    xpsm_zth_cx: null,
    yb_csrq: "",
    yb_mz: "",
    yb_zcdz: "",
    yb_zcjsrq: "",
    yke414: "",
    yke418: "",
    yke420: "",
    yke421: "",
    yke422: "",
    yke423: "",
    yke424: "",
    yke425: "",
    yke431: "",
    yke432: "",
    ys_dmqx: "",
    zlyw: null,
    zrxh: "",
    zsbm: "",
    zsxh: "",
    zsxhxz: null,
    zsxhyz: null,
    zw: "",
    zy_xjm: null,
    _X_ROW_KEY: "",
  });
};
const detailSaveClick = async()=>{
  if(addform.value){
    if (addform.value !== 1) {
      addform.value.saveflag = 2;
    }
    const res = await window.xinpuHttpApi("100361", { list: [addform.value] });
    if (res && res.Flag) {
      ElMessage({
        message: "保存成功",
        type: "success",
      });
      detailShow.value = false;
      let left = document.getElementsByClassName("xinban-pai-left");
      left[0].style = "";
      getData();
    }
  }
}
// 保存数据
const saveClick = async () => {
  const arr = xinpuGrid.value.getEditData();
  console.log(arr);
  if (arr && arr.length > 0) {
    arr.forEach((item) => {
      if (item.saveflag !== 1) {
        item.saveflag = 2;
      }
    });
    const res = await window.xinpuHttpApi("100361", { list: arr });
    if (res && res.Flag) {
      ElMessage({
        message: "保存成功",
        type: "success",
      });
      getData();
    }
  } else {
    ElMessage({
      message: "当前没有要保存和新增的数据",
      type: "warning",
    });
  }
};

// 删除数据
const deleteClick = async () => {
  const arr = xinpuGrid.value.removeTable();
  console.log(arr);
  if (arr && arr.length > 0) {
    let result = [];
    arr.forEach((item) => {
      if (item.saveflag == 1) {
        data.value.forEach((v, j) => {
          if (item._X_ROW_KEY == v._X_ROW_KEY) {
            data.value.splice(j, 1);
          }
        });
      } else {
        item.saveflag = 3;
        result.push(item);
      }
    });
    if (result.length > 0) {
      const res = await window.xinpuHttpApi("100361", { list: arr });
      if (res && res.Flag) {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        getData();
      }
    } else {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    }
  } else {
    ElMessage({
      message: "请选择要删除的数据",
      type: "warning",
    });
  }
};

const dragControllerDiv = function () {
  let resize = document.getElementsByClassName("resize");
  let left = document.getElementsByClassName("xinban-pai-left-active");
  let mid = document.getElementsByClassName("xinban-pai-right");
  let box = document.getElementsByClassName("xinban-pai");
  for (let i = 0; i < resize.length; i++) {
    // 鼠标按下事件
    resize[i].onmousedown = function (e) {
      let startX = e.clientX - 207;
      // 鼠标拖动事件
      document.onmousemove = function (e) {
        resize[i].left = startX;
        let endX = e.clientX - 207;
        let moveLen = resize[i].left + (endX - startX);
        let maxT = box[i].clientWidth - resize[i].offsetWidth;
        if (moveLen < 800) moveLen = 800;
        if (moveLen > maxT - 400) moveLen = maxT - 400;
        resize[i].style.left = moveLen;
        for (let j = 0; j < left.length; j++) {
          left[j].style.width =
            (moveLen / (document.body.clientWidth - 207)) * 100 + "%";
          mid[j].style.width =
            ((box[i].clientWidth - moveLen) /
              (document.body.clientWidth - 207)) *
              100 +
            2 +
            "%";
        }
      };
      // 鼠标松开事件
      document.onmouseup = function (evt) {
        //颜色恢复
        document.onmousemove = null;
        document.onmouseup = null;
        resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
      };
      resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
      return false;
    };
  }
};
const closeClick = () => {
  dialogVisible.value = false;
};
// 点击详情接口
const detailClick = () => {
  const row = xinpuGrid.value.getCurrentEvent();
  if(row){
    hylxYxArr.value = []
    let bmbmbm = row.bmbmbm.split(',')
    bmbmbm.forEach(v=>{
      columns.value[13].selectOption.data.forEach(its=>{
        if(v == its.bh){
          hylxYxArr.value.push(its)
        }
      })
    })
    addform.value = row;
    detailShow.value = true;
    dragControllerDiv();
  }else{
    ElMessage({
      message: "请选择要看详情的数据",
      type: "warning",
    });
  }
};
const gettableHeight = () => {
  // 这里是屏幕大小变化时需要执行的逻辑
  let screenheight = document.body.clientHeight;
  let screenWidth = document.body.clientWidth - 248;
  console.log(screenheight, screenWidth);
  screenheight = screenheight - contraTop.value.offsetHeight - 188;
  tableHeight.value = screenheight;
  tableWidth.value = screenWidth;
  console.log(tableHeight.value, tableWidth.value);
};
const handleClick = (tab, event) => {
  if (tab && tab.props && tab.props.name) {
    activeName.value = tab.props.name;
    if (tab.props.name == "all") {
      const element = document.getElementById("infos");
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
      }
    } else {
      const element = document.getElementById(tab.props.name + "s");
      console.log(element);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
      }
    }
  }
};
function checkScrollPosition() {
  const scrollTop = container.value.scrollTop;
  if (scrollTop < infos.value.offsetTop - 118 && scrollTop >= 0) {
    activeName.value = "all";
  } else if (
    scrollTop < yibaoinfos.value.offsetTop - 118 &&
    scrollTop > infos.value.offsetTop - 118
  ) {
    activeName.value = "info";
  } else if (
    scrollTop < others.value.offsetTop - 118 &&
    scrollTop > yibaoinfos.value.offsetTop - 118
  ) {
    activeName.value = "yibaoinfo";
  } else {
    activeName.value = "other";
  }
}
function getScroll() {
  container.value.addEventListener("scroll", checkScrollPosition);
}
const stateClick = (data) => {
  addform.value.syzt = data;
};
const handleAvatarSuccess = (data) => {
  console.log(data);
};
const beforeAvatarUpload = (file) => {
  console.log(file);
};
const getData = async () => {
  loading.value = true;
  const res = await window.xinpuHttpApi("100080", form.value);
  console.log(res);
  if (res && res.Flag) {
    res.ReContent.forEach((v) => {
      let arr = v.bmbmbm.split(",");
      let cardArr = [];
      arr.forEach((it) => {
        bmbmArr.value.forEach((v) => {
          if (it == v.bh) {
            cardArr.push(v);
          }
        });
      });
      v.cardArr = cardArr;
    });
    data.value = res.ReContent;
  }
  loading.value = false;
};
const getbmData = async () => {
  const res = await window.xinpuHttpApi("102001", {});
  console.log(res);
  if (res && res.Flag) {
    bmbmArr.value = res.ReContent;
    columns.value.forEach((v) => {
      if (v.field == "bmbm" || v.field == "bmbmbm" || v.field == "bmbm_1") {
        v.selectOption.data = res.ReContent;
      }
    });
  }
};
const getrylbData = async () => {
  const res = await window.xinpuWebsApi("GetFixCode", { bh: "xp_ry_006" });
  console.log(res);
  if (res && res.Flag) {
    columns.value.forEach((v) => {
      if (v.field == "rylb") {
        v.selectOption.data = res.ReContent;
      }
    });
  }
};

// 获取挂号类别
const getghlbData = async () => {
  const res = await window.xinpuWebsApi("GetFixCode", { bh: "xp_mzlb" });
  if (res && res.Flag) {
    columns.value.forEach((v) => {
      if (v.field == "ghlb") {
        v.selectOption.data = res.ReContent;
      }
    });
  }
};

// 获取病区分类
const getbqflData = async () => {
  const res = await window.xinpuWebsApi("GetFixCode", { bh: "xp_bmbm_bqfl" });
  if (res && res.Flag) {
    columns.value.forEach((v) => {
      if (v.field == "bqfl") {
        v.selectOption.data = res.ReContent;
      }
    });
  }
};

// 获取医执人员类别
const getyke418Data = async () => {
  const res = await window.xinpuWebsApi("GetXpmbCode", { bh: "yke418" });
  if (res && res.Flag) {
    columns.value.forEach((v) => {
      if (v.field == "yke418") {
        v.selectOption.data = res.ReContent;
      }
    });
  }
};

// 获取医执人员执业范围
const getyke420Data = async () => {
  const res = await window.xinpuWebsApi("GetXpmbCode", { bh: "yke420" });
  if (res && res.Flag) {
    columns.value.forEach((v) => {
      if (v.field == "yke420") {
        v.selectOption.data = res.ReContent;
      }
    });
  }
};

// 获取职称
const getyke424Data = async () => {
  const res = await window.xinpuWebsApi("GetXpmbCode", { bh: "yke424" });
  if (res && res.Flag) {
    columns.value.forEach((v) => {
      if (v.field == "yke424") {
        v.selectOption.data = res.ReContent;
      }
    });
  }
};

// 获取职务
const getyke425Data = async () => {
  const res = await window.xinpuWebsApi("GetXpmbCode", { bh: "yke425" });
  if (res && res.Flag) {
    columns.value.forEach((v) => {
      if (v.field == "yke425") {
        v.selectOption.data = res.ReContent;
      }
    });
  }
};

// 获取科室病区编号
const getyke414Data = async () => {
  const res = await window.xinpuWebsApi("GetXpmbCode", { bh: "yke414" });
  if (res && res.Flag) {
    columns.value.forEach((v) => {
      if (v.field == "yke414") {
        v.selectOption.data = res.ReContent;
      }
    });
  }
};

// 获取门诊收费权限分组
const getmedidData = async () => {
  const res = await window.xinpuWebsApi("GetFixCode", { bh: "xp_005" });
  if (res && res.Flag) {
    columns.value.forEach((v) => {
      if (v.field == "medid") {
        v.selectOption.data = res.ReContent;
      }
    });
  }
};

// 获取客服分组
const getkffzData = async () => {
  const res = await window.xinpuWebsApi("GetFixCode", { bh: "xp_006" });
  if (res && res.Flag) {
    columns.value.forEach((v) => {
      if (v.field == "kffz") {
        v.selectOption.data = res.ReContent;
      }
    });
  }
};

// 下拉框需要修改的数据
const updataSelect = (val, column) => {
  if (column.column && column.column.field == "bmbm") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.bh;
  }
  if (column.column && column.column.field == "syzt") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.dm;
  }
  if (column.column && column.column.field == "xb") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.dm;
  }
  if (column.column && column.column.field == "rylb") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if (column.column && column.column.field == "ghlb") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if (column.column && column.column.field == "bmbm_1") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.Key;
  }
  if (column.column && column.column.field == "bqfl") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if (column.column && column.column.field == "blzk") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.dm;
  }
  if (column.column && column.column.field == "yke418") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if (column.column && column.column.field == "yke420") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if (column.column && column.column.field == "yke424") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if (column.column && column.column.field == "yke425") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if (column.column && column.column.field == "yke414") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if (column.column && column.column.field == "medid") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if (column.column && column.column.field == "kffz") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.value;
  }
  if (column.column && column.column.field == "ys_dmqx") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.dm;
  }
  if (column.column && column.column.field == "sfyxgd") {
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = val.dm;
  }
};

// 下拉选择框修改的数据
const selectCheckedChange = (val, column) => {
  console.log(val, column);
  if (column.column && column.column.field == "bmbmbm") {
    let arr = [];
    let str = "";
    val.forEach((v) => {
      arr.push(v.bh);
    });
    str = arr.join(",");
    let resultIndex = columns.value[column.columnIndex].field;
    console.log(val, data.value[column.rowIndex][resultIndex]);
    data.value[column.rowIndex][resultIndex] = str;
  }
};

// 下拉选择框修改的数据
const selectCheckedChanges = (val, column) => {
  console.log(val);
  if(val){
    hylxYxArr.value = val
    let arr = []
    val.forEach(v=>{
        arr.push(v.bh)
    })
    addform.value.bmbmbm = arr.join(',')
  }
}

const searchClick = () => {
  getData();
};
onMounted(async () => {
  gettableHeight();
  getbmData();
  getData();
  getrylbData();
  getghlbData();
  getbqflData();
  getyke418Data();
  getyke414Data();
  getyke420Data();
  getyke424Data();
  getyke425Data();
  getmedidData();
  getkffzData();
  // getScroll()
  // const res = await window.xinpuHttpApi('100001',{"ybms_ybid":2},"dzblhosptalServer")
  // console.log(res);
});
</script>

<style lang="scss" scoped>
.xinban-pai {
  width: 100%;
  height: calc(100vh - 180px);
  display: flex;
  align-items: flex-start;
  .xinban-pai-left {
    width: 100%;
  }
  .xinban-pai-left-active {
    width: 64.5%;
  }
  .resize {
    cursor: col-resize;
    width: 1%;
    height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .xinban-pai-right {
    width: 35.5%;
    height: calc(100vh - 180px);
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #ebebeb;
    .admin-Drawer-top {
      height: 40px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      box-sizing: border-box;
      background: #f7f7f7;
      font-size: 14px;
      color: #333333;
      border-bottom: 1px solid #ebebeb;
    }
    .admin-Drawer-bottoms {
      width: 100%;
      .admin-Drawer-bottoms-tab {
        padding: 6px 12px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-bottom: 1px dashed #ebebeb;
        cursor: pointer;
        .admin-Drawer-bottoms-tab-case {
          padding: 4px 12px;
          box-sizing: border-box;
          background: #ebebeb;
          border-radius: 4px 4px 4px 4px;
          margin-right: 12px;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
        }
        .tabs-active {
          background: #359de1;
          color: #ffffff;
        }
      }
      .admin-Drawer-bottoms-btn {
        display: flex;
        align-items: center;
        padding: 12px;
        box-sizing: border-box;
        border-bottom: 1px dashed #ebebeb;
        .button-case-box {
          display: flex;
          align-items: center;
          margin-right: 12px;
          font-size: 14px;
          color: #333333;
          cursor: pointer;
        }
      }
      .content-tabs {
        width: 100%;
        height: calc(100vh - 308px);
        overflow-y: auto;
        padding: 12px 0 12px 12px;
        box-sizing: border-box;
        .content-line {
          width: 2px;
          height: 14px;
          background: #359de1;
          margin-right: 4px;
        }
        .content-info {
          width: 100%;
          .content-info-top {
            display: flex;
            align-items: center;
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            margin-bottom: 16px;
          }
          .content-state {
            height: 32px;
            display: flex;
            align-items: center;
            .content-state-active {
              border: 1px solid #359de1 !important;
              color: #359de1 !important;
            }
            .content-state-one,
            .content-state-two,
            .content-state-three {
              border: 1px solid #ebebeb;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              color: #333333;
            }
            .content-state-one {
              width: 66px;
              height: 32px;
              border-radius: 4px 0px 0px 4px;
            }
            .content-state-two {
              width: 66px;
              height: 32px;
              border-right: 0;
              border-left: 0;
            }
            .content-state-three {
              width: 68px;
              height: 32px;
              border-radius: 0px 4px 4px 0px;
            }
          }
        }
        .content-yibaoinfo {
          width: 100%;
          .content-yibaoinfo-top {
            display: flex;
            align-items: center;
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            margin-bottom: 16px;
          }
        }
        .content-other {
          width: 100%;
          height: 400px;
          .content-other-top {
            display: flex;
            align-items: center;
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            margin-bottom: 16px;
          }
        }
        .content-info-center-cell {
          width: 100%;
          display: flex;
          align-items: flex-start;
          flex-wrap: wrap;
          .content-info-center-case {
            width: 264px;
            display: flex;
            align-items: center;
            margin-right: 12px;
            margin-bottom: 12px;
            .content-info-center-case-lable {
              font-size: 14px;
              color: #333333;
              flex: 0 0 64px;
              text-align: right;
              padding-right: 8px;
              box-sizing: border-box;
            }
          }
          .content-info-center-case:last-child {
            margin-right: 0px;
          }
        }
      }
    }
  }
}
.admin-renyuan {
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #f7f7f7;
  .admin-renyuan-case {
    width: 100%;
    height: calc(100vh - 100px);
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
  }
  .line {
    width: 100%;
    height: 1px;
    background: #ebebeb;
    margin: 12px 0;
  }
  .admin-top {
    display: flex;
    align-items: center;
    .admin-case-top {
      display: flex;
      align-items: center;
      margin-right: 16px;
    }
  }
  .button-case {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333333;
    // margin-bottom: 16px;
    padding: 10px;
    box-sizing: border-box;
    border-top: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    border-radius: 4px 4px 0 0;
    .button-case-box {
      display: flex;
      align-items: center;
      margin-right: 12px;
      cursor: pointer;
    }
  }
}
.vxe-pageNo {
  padding-right: 16px;
  box-sizing: border-box;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
  // overflow: hidden;
}
.ren-dialog {
  :deep(.el-dialog) {
    padding: 0px;
  }
  :deep(.el-dialog__header) {
    padding: 0px;
  }
  .ren-dialog-case {
    border-radius: 4px;
    .dialog-top {
      width: 100%;
      height: 40px;
      background: #697786;
      display: flex;
      align-items: center;
      padding: 0 16px;
      box-sizing: border-box;
      justify-content: space-between;
      .dialog-top-case {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #ffffff;
      }
    }
    .dialog-content {
      width: 100%;
      // height: 400px;
      font-size: 14px;
      color: #333333;
      padding: 24px;
      box-sizing: border-box;
      .dialog-content-case {
        margin-bottom: 16px;
      }
    }
    .dialog-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 64px;
      border-top: 1px solid #ebebeb;
    }
  }
}
.admin-Drawer {
  width: 864px;
  height: calc(100vh - 100px);
  background: #ffffff;
  box-shadow: -2px 4px 8px 0px rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 0px 0px;
  position: fixed;
  top: 100px;
  right: 0;
  z-index: 100;
  .admin-Drawer-bottom {
    width: 100%;
    height: 56px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 2px solid #ebebeb;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px;
    box-sizing: border-box;
  }
  .admin-Drawer-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    box-sizing: border-box;
    font-size: 14px;
    color: #333333;
  }
  .admin-Drawer-line {
    width: 100%;
    height: 1px;
    background: #ebebeb;
  }
  .admin-Drawer-content {
    width: 100%;
    height: calc(100vh - 155px);
    padding: 16px 0 16px 16px;
    box-sizing: border-box;
    .content-avatar {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #333333;
      font-weight: bold;
    }
    .content-tabs {
      width: 100%;
      height: 100%;
      overflow: auto;
      .content-line {
        width: 2px;
        height: 14px;
        background: #359de1;
        margin-right: 4px;
      }
      .content-info {
        width: 100%;
        height: 550px;
        .content-info-top {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 14px;
          color: #333333;
          margin-bottom: 16px;
        }
        .content-state {
          height: 32px;
          display: flex;
          align-items: center;
          .content-state-active {
            border: 1px solid #359de1 !important;
            color: #359de1 !important;
          }
          .content-state-one,
          .content-state-two,
          .content-state-three {
            border: 1px solid #ebebeb;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #333333;
          }
          .content-state-one {
            width: 66px;
            height: 32px;
            border-radius: 4px 0px 0px 4px;
          }
          .content-state-two {
            width: 66px;
            height: 32px;
            border-right: 0;
            border-left: 0;
          }
          .content-state-three {
            width: 68px;
            height: 32px;
            border-radius: 0px 4px 4px 0px;
          }
        }
      }
      .content-yibaoinfo {
        width: 100%;
        height: 278px;
        .content-yibaoinfo-top {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 14px;
          color: #333333;
          margin-bottom: 16px;
        }
      }
      .content-other {
        width: 100%;
        height: 400px;
        .content-other-top {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 14px;
          color: #333333;
          margin-bottom: 16px;
        }
      }
      .content-info-center-cell {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        .content-info-center-case {
          flex: 0 0 32%;
          display: flex;
          align-items: center;
          margin-right: 16px;
          .content-info-center-case-lable {
            font-size: 14px;
            color: #333333;
            flex: 0 0 64px;
            text-align: right;
            padding-right: 8px;
            box-sizing: border-box;
          }
        }
        .content-info-center-case:last-child {
          margin-right: 0px;
        }
      }
    }
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px solid #EBEBEB;
  border-radius: 4px;
  /* background: #F7F7F7; */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #EBEBEB;
  width: 100px;
  height: 100px;
  text-align: center;
}
.avatar-uploader .el-upload:hover {}
.avatar-uploader-icon {
  font-size: 24px;
  color: #333;
  margin-bottom: 4px;
}
.avatar-uploader-text{
  font-weight: 400;
  font-size: 12px;
  color: #999999;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.vgl-layout::before {
  position: absolute;
  width: calc(100%);
  height: calc(100%);

  content: "";
  background-image: linear-gradient(to right, lightgrey 1px, transparent 1px),
    linear-gradient(to bottom, lightgrey 1px, transparent 1px);
  background-repeat: repeat;
  background-size: calc(calc(100% - 0px) / 24) 50px;
}
</style>